@import "[default].parameters.css";
@import "[default].typography.css";

.umbraco-forms-eco-custom {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
}

    .umbraco-forms-eco-custom * {
        max-width: 100% !important;
    }

    .umbraco-forms-eco-custom form {
        width: 100% !important;
    }

    .umbraco-forms-eco-custom label, .umbraco-forms-eco-custom legend {
        font-family: var(--font-family-body);
        font-size: var(--text-body-base) !important;
        font-weight: var(--font-weight-regular) !important;
        line-height: var(--font-line-height-base) !important;
        color: var(--color-text-base);
    }

    .umbraco-forms-eco-custom input:not([type=checkbox]), .umbraco-forms-eco-custom input.text,
    .umbraco-forms-eco-custom textarea,
    .umbraco-forms-eco-custom select {
        max-width: 100% !important;
        width: 100% !important;
        border: 1px solid var(--color-border-default) !important;
        padding: var(--display-insets-md) !important;
        margin: var(--display-insets-xs) 0 !important;
    }

    .umbraco-forms-eco-custom input[type=checkbox] {
        margin: var(--display-insets-xs) var(--display-insets-xs) var(--display-insets-xs) 0 !important;
    }

    .umbraco-forms-eco-custom select option {
        font-size: var(--text-body-base);
        line-height: var(--font-line-height-base);
    }

    .umbraco-forms-eco-custom input[type=file] {
        font-size: var(--text-body-base);
        line-height: var(--font-line-height-base);
    }

    /* Radio buttons: layout very similar to buttons */
    .umbraco-forms-eco-custom .radiobuttonlist {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: var(--display-stacks-lg);
    }

    .umbraco-forms-eco-custom .radiobuttonlist-horizontal {
        flex-direction: row;
    }

        .umbraco-forms-eco-custom .radiobuttonlist-horizontal label {
            cursor: pointer;
            display: inline-block;
            width: fit-content;
            max-width: 100% !important;
            padding: var(--button-padding-y) var(--button-padding-x);
            border-radius: var(--display-corner-radius-sm);
            border: 2px solid var(--color-background-button-light);
            background-color: var(--color-background-button-light);
        }

            .umbraco-forms-eco-custom .radiobuttonlist-horizontal label > div {
                display: flex;
                float: none !important;
            }

            .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:has(> input[type=radio]:checked) {
                border-color: var(--color-border-button-dark-outline);
            }

        .umbraco-forms-eco-custom .radiobuttonlist-horizontal input[type=radio] {
            opacity: 0;
            width: 0 !important;
            height: 0 !important;
        }

        .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:hover, .umbraco-forms-eco-custom .radiobuttonlist-horizontal label.hover,
        .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:focus, .umbraco-forms-eco-custom .radiobuttonlist-horizontal label.focus {
            border-color: var(--color-border-darken);
        }

        .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:has(> input[type=radio]:checked):hover, .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:has(> input[type=radio]:checked).hover,
        .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:has(> input[type=radio]:checked):focus, .umbraco-forms-eco-custom .radiobuttonlist-horizontal label:has(> input[type=radio]:checked).focus {
            /*border-color: var(--color-background-button-primary-hover);*/
        }



    /* Error validation */

    .umbraco-forms-eco-custom input.input-validation-error {
        background: inherit !important;
        border: 1px solid #8a1f11 !important;
    }

        .umbraco-forms-eco-custom input.input-validation-error:focus, .umbraco-forms-eco-custom input.input-validation-error.focus {
            border: 1px solid #8a1f11 !important;
        }

    .umbraco-forms-eco-custom span.field-validation-error {
        font-size: var(--text-body-small);
        font-style: italic;
        color: var(--color-text-muted) !important; /*non lo prende: selettore troppo generico*/
        display: block;
    }



@media screen and (min-width: 992px) {
    .umbraco-forms-eco-custom input, .umbraco-forms-eco-custom input.text,
    .umbraco-forms-eco-custom textarea {
        padding: var(--display-insets-sm) !important;
    }

    .umbraco-forms-eco-custom .radiobuttonlist-horizontal label {
        max-width: 400px !important;
    }
}